<template>
  <div>
    <b-modal ref="FormSlideModal" class="modal-slide" hide-header hide-footer>
        <Form :model="form" label-position="top">
            <FormItem label="预警规则名称">
                <i-input v-model="form.name" placeholder="请输入预警规则的名称"/>
            </FormItem>
            <FormItem label="应用主体">
                <Select v-model="form.applyObject">
                    <Option v-for="service in applyObjectList" 
                        :value="service.udcValue" 
                        :key="service.udcValue">{{service.udcValueDesc}}</Option>
                </Select>
            </FormItem>
            <FormItem label="是否启用">
                <i-switch v-model="form.switch" size="large">
                    <span slot="open">启用</span>
                    <span slot="close">禁用</span>
                </i-switch>
            </FormItem>    
            <FormItem style="text-align:center;">
                <Button type="primary" class="mr-2" :loading="form.loading" @click="addAlertRuleReq">确定</Button>
                <Button type="ghost"  @click="$refs.FormSlideModal.hide()">取消</Button>
            </FormItem>
        </Form>
    </b-modal>

    <h4 class="font-weight-bold">
      <span class="text-muted font-weight-light">风控工具 /</span> 预警规则
    </h4>

    <b-card class="mb-4">
        <Row>
            <i-col span="7">
                <b-input-group style="width:300px;">
                    <b-input type="text" placeholder="输入搜索的预警规则" />
                    <b-btn slot="append" class="btn-success">搜索</b-btn>
                </b-input-group>
            </i-col>
            <i-col span="1">
                <Button type="primary" shape="circle" icon="plus" @click="addAlertRule()">新增</Button>
            </i-col>
        </Row>
        <div>
            <Table :data="table.data" :columns="table.columns" :loading="table.loading" stripe border class="mt-2"></Table>
            <Page show-elevator show-total size="small" class="mt-2" :total="table.total" :current="table.currentPage"
                    @on-change="(pageNum) => {
                        let self = this;
                        table.pageChange.call(self,pageNum);
                    }"></Page>
        </div>
    </b-card>
  </div>
</template>

<script>

export default {
    name: "riskToolAlertRuleHome",
    metaInfo: {
        title: "风控工具 - 预警规则"
    },
    components: {
    },
    data() {
        return {
            form: {
                name: '',
                applyObject: '',
                switch: false,
                loading: false
            },
            applyObjectList: [],
            table: {
                showIndex: false,
                data: [],
                columns: [
                    {
                        title: "预警项",
                        key: "name"
                    },
                    {
                        title: "应用对象",
                        key: "apiMasterName",
                        render: (h, params) => {
                            return (
                                <div>
                                    {params.row.apiMaster.apiName}
                                </div>
                            );
                        }
                    },
                    {
                        title: "是否启用",
                        key: "enableFlag",
                        width: 120,
                        align: "center",
                        render: (h,context) => {
                            let on = context.row.enable;
                            return (
                                <div>
                                    <i-switch value={on} size="large">
                                        <span slot="open">启用</span>
                                        <span slot="close">禁用</span>
                                    </i-switch>
                                </div>
                            );
                        }
                    },
                    {
                        //<b-btn variant="outline-success borderless icon-btn" class="btn-xs" @click.prevent="edit(props.row)"><i class="ion ion-md-create"></i></b-btn>
                        title: "操作",
                        width: 160,
                        align: "center",
                        render: (h, params) => {
                            let vm = this;

                            return (
                                <div>
                                    <i-button
                                        type="text"
                                        icon="edit"
                                        size="small"
                                        class="mr-2"
                                        title="编辑"
                                        onClick={() => {
                                            return vm.edit(params);
                                        }}
                                    >
                                    </i-button>
                                    <i-button
                                        type="text"
                                        icon="trash-b"
                                        size="small"
                                        class="mr-2"
                                        title="删除"
                                        onClick={() => {
                                            return vm.remove(params);
                                        }}
                                    >
                                    </i-button>
                                </div>
                            );
                        }
                    }
                ],
                // 是否载入中
                loading: false,
                // 总页数
                total: 0,
                // 当前页数
                currentPage : 1,
                // 每页条目数
                pageSize : 10,
                // 分页切换
                pageChange: function(pageNum){
                    let self = this;
                    self.table.currentPage = pageNum;
                    self.loadTable().then(function(res){
                        if(res.data){
                            self.table.data = res.data.data ? res.data.data : [];
                        }
                    });
                }
            }
        };
    },
    mounted(){
        let self = this;
        //加载客户列表
        self.loadTable().then(function(res){
            // console.log(res);
            if(res.data){
                self.table.data = res.data.data ? res.data.data : [];
            }
        });

        // 加载
        self.loadApplyObject();
    },
    methods: {
        loadApplyObject(){
            let self = this;
            self.$http.get('/app/v1/udc/langs/zh_CN/udcCodes/RISK_OBJECT').then(function(resp){
                // console.log(resp);
                self.applyObjectList = resp.data;
            });
        },
        loadTable(){
            let self = this;
            self.table.loading = true;

            return new Promise(function(resolve,reject){
                self.$http
                    .get('/app/v1/riskTool/alertRules',{
                        params: {
                            pageSize: 10,
                            currentPage: self.table.currentPage
                        }
                    })
                    .then(function(res) {
                        self.table.total = res.data.recordCount;
                        self.table.loading = false;
                        resolve(res);
                    },function(res){
                        self.table.loading = false;
                        reject(res);
                    });
            });
        },
        edit: function(p) {
            this.$router.push({
                path: "/riskTool/scorecard/setting",
                query: {
                    pname: p.row.name,
                    pid: p.row.riskSketchpad.oid,
                    type: 'alertRule'
                }
            });
        },
        remove(data) {
            let self = this;
            let name = data.row.name;

            // console.log(name);
            this.$Modal.confirm({
                title: "系统提示",
                content: "<p>确认删除“" + name + "”？</p>",
                onOk: () => {
                    
                    // 发送请求
                    self.$http
                        .delete(
                            "/app/v1/riskTool/alertRules/" + data.row.oid
                        )
                        .then(function(res) {
                            if(res.code === 0){
                                self.$Message.success("删除成功!");
                                self.$Notice.success({
                                    title: '系统提示',
                                    desc: res.desc
                                });

                                //加载客户列表
                                self.table.data = [];
                                self.loadTable().then(function(res){
                                    if(res.data){
                                        self.table.data = res.data.data ? res.data.data : [];
                                    }
                                });
                            }else{
                                self.$Notice.error({
                                    title: '系统提示',
                                    desc: res.desc
                                });
                            }
                            
                        });
                },
                onCancel: () => {
                    this.$Message.info("取消删除");
                }
            });
        },
        showSlideModal() {
            this.$refs.slideModal.show();
        },
        hideSlideModal() {
            this.$refs.slideModal.hide();
        },
        addAlertRule(){
            this.$refs.FormSlideModal.show();
        },
        addAlertRuleReq(){
            let self = this;
            let url = '/app/v1/riskTool/alertRules';
            let params = {
                "name": self.form.name,
                "riskObjectType": self.form.applyObject,
                "enable": self.form.switch ? 1 : 0
            };

            self.form.loading = true;
            // 发请求
            self.$http.post(url,params)
                .then(function(res){
                    self.form.loading = false;
                    if(res.code === 0){
                        self.$Notice.success({
                            title: '系统提示',
                            desc: res.desc
                        });
                        self.$refs.FormSlideModal.hide();

                        //加载客户列表
                        self.table.data = [];
                        self.loadTable().then(function(res){
                            // console.log(res);
                            if(res.data){
                                self.table.data = res.data.data ? res.data.data : [];
                            }
                        });
                    }else{
                        self.$Notice.error({
                            title: '系统提示',
                            desc: res.desc
                        });
                    }
                },function(res){
                    self.$Notice.error({
                        title: '系统提示',
                        desc: res.desc
                    });
                })
        }
    }
};
</script>
